<template>
  <div class="com-container">
    <div style="position: absolute; z-index: 1; padding: 10px">
      <el-select v-model="trendType" @change="pickTrendType" size="mini">
        <el-option v-for="item in trendTypeOpts" :key="item.key" :label="item.text" :value="item.key"></el-option>
      </el-select>
    </div>
    <div class="com-chart" ref="trend_ref"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'

export default {
  data() {
    return {
      chartInstance: null,
      allData: [],
      trendType: 'map',
      trendTypeOpts: [],
    }
  },
  computed: {
    comStyle() {
      return {
        fontSize: this.titleFontSize + 'px',
        color: getThemeValue(this.theme).titleColor,
      }
    },
    marginStyle() {
      return {
        marginLeft: this.titleFontSize + 'px',
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor,
      }
    },
    ...mapState(['theme']),
  },
  watch: {
    theme() {
      this.chartInstance.dispose()
      this.initChart()
      this.screenAdapter()
      this.updateChart()
    },
  },
  created() {
    this.$socket.registerCallBack('trendData', this.getData)
  },
  mounted() {
    this.initChart()
    // this.getData()
    this.$socket.send({
      action: 'getData',
      socketType: 'trendData',
      chartName: 'trend',
    })
    window.addEventListener('resize', this.screenAdapter)
    this.screenAdapter()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.screenAdapter)
    this.$socket.unRegisterCallBack('trendData')
  },
  methods: {
    pickTrendType() {
      this.updateChart()
    },
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.trend_ref, this.theme)
      const initOption = {}
      this.chartInstance.setOption(initOption)
    },
    async getData() {
      // 把返回的对象中的data对应的值赋值给res这个变量
      const { data: res } = await this.$http.get('trend')
      // 这里只做接收数据并存好的操作，进一步的处理全都放到updateChart里去做
      this.allData = res
      this.trendTypeOpts = res.type
      this.updateChart()
    },
    updateChart() {
      const chartData = this.allData[this.trendType].data
      const month = this.allData.common.month

      // 半透明的颜色值
      const colorArr1 = [
        'rgba(11, 168, 44, 0.5)',
        'rgba(44, 110, 255, 0.5)',
        'rgba(22, 242, 217, 0.5)',
        'rgba(254, 33, 30, 0.5)',
        'rgba(250, 105, 0, 0.5)',
      ]
      // 全透明的颜色值
      const colorArr2 = [
        'rgba(11, 168, 44, 0)',
        'rgba(44, 110, 255, 0)',
        'rgba(22, 242, 217, 0)',
        'rgba(254, 33, 30, 0)',
        'rgba(250, 105, 0, 0)',
      ]

      const series = chartData.map((item, index) => {
        return {
          type: 'line',
          name: item.name,
          data: item.data,
          stack: 'map',
          areaStyle: {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: colorArr1[index],
              },
              {
                offset: 1,
                color: colorArr2[index],
              },
            ]),
          },
        }
      })
      const legend = chartData.map((item) => {
        return {
          name: item.name,
        }
      })
      console.log(series)

      const updateOption = {
        title: {
          text: '┃ TREND STATISTICS',
          left: 20,
          top: 20,
          textStyle: {
            // color: 'white',
          },
        },
        legend: {
          data: legend,
          icon: 'circle',
          top: '15%',
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            z: 0,
            lineStyle: {
              color: '#2d3443',
              width: 33,
            },
          },
        },
        xAxis: {
          type: 'category',
          data: month,
        },
        yAxis: {
          type: 'value',
        },
        series: series,
      }
      this.chartInstance.setOption(updateOption)
    },
    screenAdapter() {
      const sizeValue = (this.$refs.trend_ref.offsetWidth / 100) * 3.6
      const adapterOption = {
        legend: {
          itemWidth: sizeValue,
          itemHeight: sizeValue,
          itemGap: sizeValue,
          textStyle: {
            fontSize: sizeValue / 2,
          },
        },
      }
      this.chartInstance.setOption(adapterOption)
      this.chartInstance.resize()
    },
  },
}
</script>

<style></style>
